<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>发布</title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
    	.mui-scroll-wrapper {
    		overflow: scroll;
    	}
    	.radio_inline{
            display: inline-block;
            width: 65%;
        }
        .radio_inline label{
            width: 45%;
            padding-left: 35px;
            padding-right: 35px;
        }
        .radio_inline input[type=radio]{
            width: 15%;             
            right: auto;
        }
        .upload-box {
        	display: flex;
        	/*justify-content: center;*/
        	flex-direction: column;
        	align-items: center;
        }
		#popover, #popover-tag{
			top: 100px;
			width: 80%;
			margin-left: 10%;;
		}
    </style>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!-- 主界面菜单同时移动 -->
	    <!-- 侧滑导航根容器 -->
	    <div id="popover" class="mui-popover">
			<div class="mui-card" style="width: 100%">
                <form class="mui-input-group">
                    <div class="mui-input-row mui-radio mui-left">
                        <label>全新</label>
                        <input name="new" type="radio" checked>
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>九成新</label>
                        <input name="new" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>八成新</label>
                        <input name="new" type="radio" >
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>七成新</label>
                        <input name="new" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>六成新</label>
                        <input name="new" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>五成新</label>
                        <input name="new" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>四成新</label>
                        <input name="new" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>三成新</label>
                        <input name="new" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>二成新</label>
                        <input name="new" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>一成新</label>
                        <input name="new" type="radio">
                    </div>
                </form>
            </div>
		</div>
		<div id="popover-tag" class="mui-popover">
			<div class="mui-card" style="width: 100%">
                <form class="mui-input-group">
                    <div class="mui-input-row mui-radio mui-left">
                        <label>影像图书</label>
                        <input name="goodType" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>家居用品</label>
                        <input name="goodType" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>数码世界</label>
                        <input name="goodType" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>闲置礼品</label>
                        <input name="goodType" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>服装包饰</label>
                        <input name="goodType" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>文体用品</label>
                        <input name="goodType" type="radio">
                    </div>
                    <div class="mui-input-row mui-radio mui-left">
                        <label>其他</label>
                        <input name="goodType" type="radio" checked> 
                    </div>
                </form>
            </div>
		</div>
	    <div class="mui-off-canvas-wrap mui-draggable">
	        <!-- 主页面容器 -->
	        <div class="mui-inner-wrap">
	            <!-- 菜单容器 -->

	            <!-- 主页面标题 -->
	            <header class="mui-bar mui-bar-nav">
	                <a class="mui-icon mui-icon-undo" href="new-mine.html"></a>
	                <h1 class="mui-title">发布商品</h1>
	            </header>
	            <!-- 主页面内容容器 -->
	            <div class="mui-content mui-scroll-wrapper">
	                <div class="mui-scroll">
	                    <!-- 主界面具体展示内容 -->
	                    
	                    <form class="mui-input-group">
						    <div id="good-title" class="mui-input-row">
						        <label>名称</label>
						    	<input type="text" class="mui-input-clear" placeholder="请添加商品名称">
						    </div>
						    <div id="new-degree" class="mui-input-row">
						    	<label>新旧程度</label>
								<input type="text" class="mui-input-clear" placeholder="请选择" onclick="choseNewOld()" />
								<!--<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>-->
								<!--<input name="radio1" type="radio">-->
						
							</div>
							<div id="good-tag" class="mui-input-row">
						    	<label>商品类目</label>
								<input type="text" class="mui-input-clear" placeholder="请选择" onclick="choseType()" />
							</div>
							<div id="good-stock" class="mui-input-row">
						    	<label>商品库存量</label>
								<input type="text" class="mui-input-clear" value="1" />
							</div>
							<div class="mui-input-row">
						    	<label>校区</label>
						    	<span class="radio_inline mui-radio">
		                            <input name="radio1" type="radio" id="radio_jiaoqiao" checked value="1">
		                            <label for="radio_man">蛟桥</label>
		                            <input name="radio1" type="radio" id="radio_mailu" value="0">     
		                            <label for="radio_woman">麦庐</label>        
		                        </span>    
								<!--<div class="radio-box">-->
									<!--<input name="schoolRadio" value="1" type="radio">1-->
									<!--<input name="schoolRadio" value="2" type="radio">2-->
								<!--</div>-->
							</div>
							<br />
							<hr />
							<div id="good-detail" class="mui-input-row" style="height: 100px;">
						    	<label>详情</label>
								<textarea id="shop_detail" style="overflow: hidden; height: 90px;" placeholder="请添加商品详情" ></textarea>
							</div>
							<hr />
							<br />
						    <div id="tel" class="mui-input-row">
						        <label>手机号</label>
						    	<input type="text" class="mui-input-clear" placeholder="请填写正确的手机号">
						    </div>
						    <div id="oldPrice" class="mui-input-row">
						        <label>原价格</label>
						    	<input type="text" class="mui-input-clear" placeholder="请填写商品原价格（单位）元">
						    </div>
						    <div id="nowPrice" class="mui-input-row">
						        <label>交易价格</label>
						    	<input type="text" class="mui-input-clear" placeholder="请填写商品交易价格（单位）元">
						    </div>
							<p style="margin: 15px;">选取三张图片</p>
							<div class="upload-box" style="margin: 0 auto;padding: 5px; width: 92%; border: 1px dashed #C8C7CC;">
								<div class="mui-icon mui-icon mui-icon-image" style="font-size: 40px;"></div>
								<button type="button" class="mui-btn mui-btn-primary uploadBtn">点击选择图片</button>
								<p style="font-size: 16px;text-align: center;">上传后的图片会截取居中的部分，请保证所拍摄的物体位于照片中央</p>
							</div>
						    <div class="mui-button-row">
						        <button id="publish-good" type="button" style="width: 100%;" class="mui-btn mui-btn-primary" >提交</button>
						    </div>
						    <div id="" style="width: 100%; height: 50px;"></div>
						</form>
	                </div>
	            </div>
	       	 <!--<div class="mui-off-canvas-backdrop"></div>-->
	        </div>
	    </div>
	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript">
		function choseNewOld() {
			mui('#popover').popover('toggle');
		}
		function choseType() {
			mui('#popover-tag').popover('toggle')
		}
		console.log($('#popover .mui-card .mui-radio'))
		$('#popover .mui-card .mui-radio').click(function() {
			let newDegree = $(this).children('label').text()
			$('#new-degree').children('input').val(newDegree)
			mui('#popover').popover('toggle')			
		})
		$('#popover-tag .mui-card .mui-radio').click(function() {
			let tag = $(this).children('label').text()
			$('#good-tag').children('input').val(tag)
			mui('#popover-tag').popover('toggle')			
		})

		$('#publish-good').click(function() {
			let good = {}
			good.id = String(~~(Math.random() * 1000))
			good.title = $('#good-title').children('input').val()
			good.newDegree = $('#new-degree').children('input').val()
			good.tag = $('#good-tag').children('input').val()
			good.stock = $('#good-stock').children('input').val()
			good.detail = $('#good-detail').children('textarea').val()
			good.price = $('#nowPrice').children('input').val()
			good.tel = $('#tel').children('input').val()
			good.oldprice = $('#oldPrice').children('input').val()
			good.images = ['../images/shop3.jpeg', '../images/shop4.jpeg']
			good.color = '默认'
			good.size = '默认'
			console.log(good)
			if(good.title && good.newDegree && good.tag && good.price && good.detail && good.tel) {
				// 全部填写 添加进allGoods
				let account = JSON.parse(localStorage.getItem('$loginUser')).account
				good.seller = account
				let appData = JSON.parse(localStorage.getItem('$appData'))
				appData.data.allGoods.push(good)
				console.log(appData)
				localStorage.setItem('$appData', JSON.stringify(appData))
				mui.toast('发布成功', {type: 'div'})
				setTimeout(location.href = 'new-mine.html', 4000)
				
			} else {
				mui.alert('请输入完整') 
			}
		})
	</script>
</body>
</html>